<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-11-20
  Time: 14:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
    <title>Title</title>

    <jsp:include page="/common/common.jsp" />

    <script type="text/javascript">
        $(function () {
            $('#myModal').on('shown.bs.modal', function (e) {
                //1.绑定编号
                $.post("/demand/getDemandId",function (data) {
                    $("input[name='demandid']").attr('placeholder',data.id) ;
                })

                //2.绑定客户
                $.post("/customer/query",function (data) {
                    var opt = "" ;
                    $.each(data, function (index,item) {
                        var cid = item.customerid ;
                        var cname = item.customername ;
                        opt += "<option value="+cid+">"+cname+"</option>"
                    })

                    $("select[name='customerid']").append(opt) ;
                })

                //3.绑定跟踪人员
                $.post("/user/queryAll",function (data) {
                    var opt = "" ;
                    $.each(data,function (index,item) {
                        var id = item.id ;
                        var username =item.username ;
                        opt += "<option value="+id+">"+username+"</option>" ;
                    })

                    $("select[name='userid']").html(opt) ;
                })

            })

            //数据校验
            $('#fm').bootstrapValidator({
                message: '',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    demandid : {
                        message: '编号不能为空！',
                        validators: {
                            notEmpty: {
                                message: '编号不能为空！'
                            }
                        }
                    },
                    houseaddress: {
                        message: '地址不能为空！',
                        validators: {
                            notEmpty: {
                                message: '编号不能为空！'
                            }
                        }
                    },
                    acreagemin: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '最小面积不能为空！'
                            },
                            regexp: {
                                regexp: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
                                message: '面积只能为整数或者小数！'
                            }
                        }
                    },
                    acreagemax: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '最大面积不能为空！'
                            },
                            regexp: {
                                regexp: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
                                message: '面积只能为整数或者小数！'
                            }
                        }
                    },
                    housetype: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '户型不能为空！'
                            }
                        }
                    },
                    cengshumin: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '层数不能为空！'
                            },
                            digits: {
                                message: '该值只能包含数字。'
                            }
                        }
                    },
                    cengshumax: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '共有层数不能为空！'
                            },
                            digits: {
                                message: '该值只能包含数字。'
                            }
                        }
                    },
                    price: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '价格不能为空！'
                            },
                            regexp: {
                                regexp: /^[0-9]+([.]{1}[0-9]+){0,1}$/,
                                message: '价格只能为整数或者小数！'
                            }
                        }
                    },
                    degree: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '装修类型不能为空！'
                            }
                        }
                    },
                    sheshi: {
                        message: '',
                        validators: {
                            notEmpty: {
                                message: '配套设施不能为空！'
                            }
                        }
                    },



                }
            });

            $("#tb").bootstrapTable({
                url:'/demand/query',
                //客户端分页
                pagination:true,
                height:540,
                search:true,
                toolbar: '#tool',
                clickToSelect:true,
                detailView:true,
                columns:[
                    {
                        checkbox:true,
                    },
                    {
                        field:'demandid',
                        title:'编号'
                    },
                    {
                        field:'houseaddress',
                        title:'地址'
                    },
                    {
                        field:'housetype',
                        title:'户型'
                    },
                    {
                        field:'degree',
                        title:'装修类型'
                    },
                    {
                        field:'createdate',
                        title:'创建时间'
                    }
                ],
            }) ;
        }) ;

        //
        function smt(){
            //启用较验
            $('#fm').data('bootstrapValidator').validate();
            //验证是否通过true/false
            var flag = $('#fm').data('bootstrapValidator').isValid() ;

            if (flag){
                //序列化表单
                var formStr=$('#fm').serialize();
                //处理表单控件的中文乱码
                params = decodeURIComponent(formStr,true);
                alert(params) ;
                $.ajax({
                    'type':'post',
                    'url':'/demand/save',
                    'data':params,
                    success:function(data){
                        //关闭对话框
                        $("#myModal").modal('hide') ;
                        //重新加载表格
                        $("#tb").bootstrapTable('load',data) ;
                    }
                })
            }


        }


      function downselect() {
          var ids = "" ;
            //得到选中的行
         var rows =  $("#tb").bootstrapTable('getSelections') ;

         $.each(rows,function (index,item) {
             var demandid = item.demandid ;
             ids = ids + "-" + demandid ;
         })
        //设置form的hidden的值
         $("#ids").val(ids) ;
         //控制表单提交
          $("#fmids").submit() ;
      }
    </script>
</head>
<body>

<form id="fmids" action="/demand/fileDownloadSelectData">
    <input id="ids" type="hidden" name="ids">
</form>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">咨询列表</h3>
    </div>
    <div class="panel-body">
        <table id="tb"></table>
    </div>
</div>


<div id="tool">
    <div class="text-center">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon-plus"> </span> &nbsp; 增加
        </button>

      <%--  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
            <span class="glyphicon-plus"> </span> &nbsp; 删除
        </button>
--%>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">
            <span class="glyphicon-plus"> </span> &nbsp; 上传咨询数据
        </button>

       <a  class="btn btn-primary" href="/demand/fileDownload">
            <span class="glyphicon-plus"> </span> &nbsp; 下载模板
       </a>

        <a  class="btn btn-primary" href="/demand/fileDownloadData">
            <span class="glyphicon-plus"> </span> &nbsp; 下载数据
        </a>

        <a  class="btn btn-primary" href="javascript:downselect()">
            <span class="glyphicon-plus"> </span> &nbsp; 下载所选数据
        </a>

      <%--  <a  class="btn btn-primary" href="javascript:getSelectId()">
            <span class="glyphicon-plus"> </span> &nbsp; 下载数据选中数据
        </a>--%>
    </div>
</div>

<div class="modal inmodal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">增加咨询</h4>

            </div>

            <form method="post" class="form-horizontal" id="fm">
            <div class="modal-body">
                <div class="ibox-content">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">编号</label>
                        <div class="col-sm-10">
                            <input   name="demandid" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">房屋地址</label>
                        <div class="col-sm-10">
                            <input name="houseaddress" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">客户姓名</label>
                        <div class="col-sm-10">
                            <select name="customerid" class="form-control">

                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-2 control-label">最小面积</label>
                        <div class="col-sm-10">
                            <input name="acreagemin" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">最大面积</label>
                        <div class="col-sm-10">
                            <input name="acreagemax" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">户型</label>
                        <div class="col-sm-10">
                            <input name="housetype" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">层数</label>
                        <div class="col-sm-10">
                            <input name="cengshumin" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">共有层数</label>
                        <div class="col-sm-10">
                            <input name="cengshumax" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input name="price" type="text" class="form-control"  placeholder="">

                        </div>
                    </div>



                    <div class="form-group">
                        <label class="col-sm-2 control-label">装修类型</label>
                        <div class="col-sm-10">
                            <input name="degree" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">配套设施</label>
                        <div class="col-sm-10">
                            <input name="sheshi" type="text" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">跟踪人</label>
                        <div class="col-sm-10">
                            <select name="userid" class="form-control">

                            </select>
                        </div>
                    </div>
                </div>



            </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="smt();">保存</button>
            </div>

            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                </button>
                <i class="fa fa-laptop modal-icon"></i>
                <h4 class="modal-title">上传文件</h4>

            </div>
                <div class="modal-body">

                    <form class="form-horizontal" role="form" method="post"
                          action="" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">文件名</label>
                            <div class="col-sm-10">
                                <input multiple type="file" name="myfile" class="col-sm-10 myfile" value="" />
                            </div>
                        </div>
                    </form>

                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="smt();">保存</button>
                </div>

            </form>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(".myfile").fileinput({
        language: 'zh',
        uploadUrl: "/demand/uploadExcel",
        maxFileSize: 0, //文件的大小
        maxFileCount:2,//文件的数量
        showUpload:true, //是否显示上传按钮
        showRemove :false, //显示移除按钮
        showPreview :true, //是否显示预览
        showCaption:true,//是否显示标题
        allowedFileExtensions: ["jpg", "png", "gif","xlsx"],
        enctype: 'multipart/form-data', //二进制传递参数
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index){
        alert(data.response.msg) ;
    });

</script>



</body>
</html>
